<template>
  <div>
    <button @click="flag = !flag">change</button>
    <keep-alive :max="2" :exclude="'B'" :include="['A']">
      <A v-if="flag"></A>
      <B v-else></B>
    </keep-alive>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import A from './components/A/A.vue'
import B from './components/B/B.vue'

// keep-alive 组件：仅能包裹唯一一个子组件，一般常与 v-if 选择渲染连用
// 当其被包裹的子组件被进行卸载行为时，会阻止卸载行为，并将该组件此时的状态信心存储于缓存中
// 当子组件再次被创建行为时，会从缓存中读取子组件信息并重现渲染
// 故子组件中使用 Activated 和 Deactivated 生命周期代表被激活和被禁用，此时会触发对于的生命周期钩子函数
// Activated 生命周期指子组件被激活，可以用于多次请求初始数据
// Deactivated 生命周期指子组件被禁用,用于取代 Unmounted 生命周期,进行该时刻的行为,但可以被多次触发
// keep-alive 组件可以接受自定义属性传值实现功能
// <keep-alive :include || :exclude = "name: string || nameArr: string[]" :max="num:number ">
// :max 属性为指定为最大缓存的子组件个数,会自动删除最不常用的子组件 

const flag = ref<boolean>(true)
</script>
<style scoped></style>
